js-Promise

| 分类于

@toc

概念

ES6开始支持
Promise对象用于一个异步操作的最终完成（包括成功和失败）及结果值的表示

简单说，就是处理异步请求的。
之所以叫做Promise，就是我承诺做这件事，如果成功则怎么处理，失败则怎么处理

1
2
3
4
5
// 语法
new Promise(
	/* 下面定义的函数是executor */
	function(resolve, reject) {...}
);

executor

  • executor 是一个带有 resolve 和 reject 两个参数的函数
  • executor 函数在Promise构造函数执行时立即执行，被传递resolve和reject函数（executor 函数在Promise构造函数返回新建对象前被调用）
  • executor 内部通常会执行一些异步操作，一旦完成，可以调用resolve函数来将promise状态改成fulfilled即完成，或者在发生错误时将它的状态改为rejected即失败
  • 如果在executor函数中抛出一个错误，那么该promise 状态为rejected。executor函数的返回值被忽略
  • executor中，resolve或reject只能执行其中一个函数

    Promise的状态

  • pending: 初始状态，不是成功或失败状态
  • fulfilled: 意味着操作成功完成
  • rejected: 意味着操作失败
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    setInterval(function[, delay]); // 间隔多少毫秒就执行函数一次，循环执行
    setTimeout(function[, delay]); // 等待多少毫秒就执行函数一次，结束
    delay  // 延时，缺省0，立即执行
    function // 延时到的时候执行的函数
    var myPromise = new Promise(function(resolve, reject){
    	console.log('do sth.')
    	setTimeout(()=>{
    		console.log('~~~~~')
    		resolve('ok');
    	}, 3000); // 
    })

    console.log(myPromise);

    setInterval(() => {
    	console.log(myPromise, '++++')
    }, 1000); // 每隔1秒执行一次

Promise.then(onFulfilled, onRejected)

参数是2个函数，根据当前Promise对象A的状态来调用不同的函数，fulfilled走onFulfilled函数F1，rejected走onRejected函数F2
then的返回值是一个新的promise对象B，执行任意一个回调函数，对这个promise对象来说就是其返回值
调用任何一个函数后，其返回值可以被后续的then方法继续捕捉（链式）

任何一个回调函数执行，其返回值ret被resolve(ret)，作为B的完成结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var myPromise = new Promise(function(resolve, reject){
	console.log('do sth.')
	setTimeout(()=>{
		console.log('~~~~~')
		resolve('ok');
		//reject('error');
	}, 3000); // 延时3秒执行一次结束
})

console.log(myPromise);

setInterval(() => {
	console.log(myPromise, '++++');
}, 1000); // 每隔1秒执行一次

let pro1 = myPromise.then(
	value => {
		console.log('successful');
		return 1111;
	},
	reason => {
		console.log('failed');
		return 2222;
	}
)

setInterval(() => {
	console.log(pro1, '@@@@');
}, 1000); // 每隔1秒执行一次

catch(onRejected)

  • 为当前Promise对象A添加一个拒绝回调F，返回一个新的Promise对象B

  • 如果A进入fulfilled状态，则A的完成结果作为B的完成结果

  • 如果A进入rejected状态，回调F执行，F的返回值ret来resolve(ret)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    var myPromise = new Promise(function(resolve, reject){
    	console.log('do sth.')
    	setTimeout(()=>{
    		console.log('~~~~~')
    		resolve('ok');
    		//reject('error');
    	}, 3000); // 延时3秒执行一次结束
    })

    console.log(myPromise);

    setInterval(() => {
    	console.log(myPromise, '++++');
    }, 1000); // 每隔1秒执行一次

    let pro2 = myPromise.catch(reason=>{
    	console.log(reason, '****')
    })

    setInterval(() => {
    	console.log(pro2, '####');
    }, 1000); // 每隔1秒执行一次

Promise 提供2个方法：

  • Promise.resolve(value) 返回 状态为fulfilled的Promise对象
  • Promise.reject(reason)返回 状态为rejected状态的Promise对象
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    var myPromise = new Promise(function(resolve, reject){ 
    	console.log('do sth.')
    	setTimeout(()=>{
    		console.log('~~~~~')
    		resolve('ok');
    		//reject('error');
    	}, 3000); // 延时3秒执行一次结束
    })

    let pro1 = myPromise.then( 
    	value => {/*如果成功则显示结果*/
    		console.log(1, 'successful');
    		return 1111;
    	},
    	reason => {/*如果失败则显示原因*/ 
    		console.log(2, 'failed');
    		return 2222;
    	}
    )

    let pro2 = myPromise.catch(reason=>{
    	console.log(3, reason)
    })

    // 开始链式调用
    pro2.then( 
    	value => console.log(4, value), // value是什么？
     	reason => console.log(5, reason) // reason是什么？
    ).then(
    	value => {
    		console.log(6, value) // 已经不是pro2对象了，value是什么
    		return Promise.reject('pro2 => new Promise object rejected');
     	}
    ).catch(
    	reason => {
    		console.log(7, reason);
     		return Promise.resolve(reason + ' *')
    	}
    ).then(
    	value => console.log(8, value), // value是什么？
    	reason => console.log(9, reason) // reason是什么？
    ) // 返回的是什么？

    /*执行结果
    do sth.
    ~~~~~
    1 'successful'
    4 'ok'
    6 undefined
    7 'pro2 => new Promise object rejected'
    8 'pro2 => new Promise object rejected *'
    */

异步实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function runAsync() {
    return new Promise(function (resolve, reject) {
        // 异步操作   
        setTimeout(function () {
            console.log('do sth...');
            resolve('ok...');
        }, 3000);
    });
}

// 调用
runAsync().then(
    value => {
        console.log(value);
        return Promise.reject(value + '*');
    }
).catch(
    reason => {
        console.log(reason);
        return Promise.resolve(reason + '*');
    }
).then(
    value => {
        console.log(value);
        console.log('Promise END');
    }
)

console.log('==== FIN ====');

/*执行结果
==== FIN ====
do sth...
ok...
ok...*
ok...**
Promise END
*/
感谢支持 ！
0%